<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <RouterLink to="/home/list?age=21&name=lucy&hobby=css">Home</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/100/row/200?age=20&name=jack">/shop/100/row/200</RouterLink>
      </li>
      <li>
        <RouterLink to="/shop/300/row/400#hello">/shop/300/row/400</RouterLink>
      </li>
      <li>
        <RouterLink to="/user/id/1">User</RouterLink>
      </li>
      <li>
        <RouterLink to="/cart">Cart</RouterLink>
      </li>
    </ul>
    <!-- #/shop/100/row/200?age=20&name=jack#hello -->
    params:{{ $route.params }}
    <hr>
    query:{{ $route.query }}
    <hr>
    hash:{{ $route.hash }}
    <RouterView></RouterView>
  </div>
</template>
<script>
export default {
  watch: {
    $route(newRoute, oldRoute) {
      console.log(newRoute, oldRoute);
    }
  }
};
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>